import React from 'react';
import { useTranslation } from 'react-i18next';
import { Tabs } from 'antd';
import config from './config';

import './UserPreferences.styl';

function UserPreferences(props) {
  const { t } = useTranslation("Preferences");

  return (
    <Tabs className="preferences" keyboard="true">
      {config.map(p => {
        const Pane = p.component;
        return (
          <Tabs.TabPane key={p.id} tab={t(p.label)} >
            <Pane { ...props } onSaveCallback={props.onSaveCallback} />
          </Tabs.TabPane>
        );
      })}
    </Tabs>
  );
};

export default UserPreferences;
